<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>正奥能源油库管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    html,
    body,
    div,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    img,
    ul,
    ol,
    li {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 16px;
      font: inherit;
      vertical-align: baseline;
    }

    html,
    body {
      height: 100%;
    }

    .login-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-image: url('../img/Snipaste_2023-06-20_10-48-02.png');
      background-size: cover;
      background-position: center;
    }

    .login-form {
      position: absolute;
      right: 330px;
      top: 260px;
      max-width: 400px;
      padding: 20px;
      border-radius: 4px;
      background-color: rgba(255, 255, 255, 0.8);
    }

    .login-title {
      text-align: center;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .login-button {
      width: 100%;
    }
  </style>
</head>
<body>
<div id="app" v-cloak>
  <template>
    <div class="login-container">
      <div class="login-form">
        <h2 class="login-title">登录</h2>
        <el-form ref="loginForm" :model="loginData" :rules="loginRules" label-width="80px" @keyup.enter.native="login">
          <el-form-item label="用户名" prop="username">
            <el-input v-model.trim="loginData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model.trim="loginData.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
</div>

<script src="../js/vue.min.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/element.lib.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        loginData: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      login() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const url = 'http://192.168.3.30:8799/ec/eclg/checkInfo';
            const loginData = this.loginData;
            axios.get(url, { params: loginData })
              .then(response => {
                if (response.data.code === 200) {
					localStorage.setItem('token', response.data.token)
					localStorage.setItem('loginUser', response.data.loginUser)
                  // 登录成功的逻辑
                  this.$message({
                    message: '登录成功',
                    type: 'success'
                  });
                  // 清空表单字段
                  window.location.href = '../index.html';
                  this.loginData.username = '';
                  this.loginData.password = '';
                } else {
                  // 登录失败的逻辑
                  this.$message.error(response.data.msg);
                }
              })
              .catch(error => {
                // 请求失败的逻辑
                this.$message.error(response.data.msg);
              });
          }
        });
      }
    },
  });
</script>
</body>
</html>
